<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9块9包邮</title>
    <link rel="stylesheet" href="../sass/header.css">
    <link rel="stylesheet" href="../sass/index.css">
    <style>
        #All {
            background-color: #f6f6f6;
        }

        .menus {
            width: 100%;
            height: 46px;
            background-color: rgb(67, 36, 12);
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            min-width: 1200px;
        }

        .menus ul {
            list-style: none;
            display: flex;
        }

        .menus ul li {
            width: 220px;
            height: 46px;
            line-height: 47px;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            color: rgb(255, 255, 255);
        }

        .menus ul li:hover {
            color: rgb(67, 36, 12);
            background-color: rgb(254, 228, 78);
        }

        .banner {
            box-sizing: border-box;
            padding: 0 30px;
            font-size: 24px;
            font-weight: 700;
            line-height: 56px;
            color: #43200c;
            background-color: #fef9dd;
        }

        .sub-ul {
            box-sizing: border-box;
            height: 56px;
            font-size: 18px;
            color: #43200c;
            background-color: #fff;
        }

        .sub-ul ul {
            list-style: none;
        }

        .sub-ul ul li {
            float: left;
            cursor: pointer;
            position: relative;
            margin: 0 0 0 16px;
            padding: 0 17px;
            font-weight: 500;
            text-align: center;
            line-height: 56px;

        }

        .active {
            box-shadow: inset 0 -3px 0 -1px currentColor;
        }

        .on {
            background-color: rgb(254, 228, 78);
        }

        .product {
            margin-top: 20px;
            padding: 0 16px;
            height: 100%;
            width: 100%;
            margin-bottom: 100px;
        }

        .product .product-container {
            height: 100%;
            overflow: hidden;
        }

        .product .product-container .LI {
            margin-bottom: 15px;
        }

        .product-more {
            margin-top: 126px;
        }

        .product-more .more {
            cursor: pointer;

            margin: 0 auto;
            width: 250px;
            font-size: 24px;
            font-weight: 500;
            line-height: 70px;
            text-align: center;
            color: #43240c;
            background-color: #fee44e;
            border-radius: 34px;
            height: 70px;
        }

        .ul-bottom-F {
            width: 282px;
            overflow: hidden;
            font-size: 14px;
            line-height: 18px;
            text-overflow: ellipsis;
            color: #877a73;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="All">
        <!-- 头部 -->
        <div id="header"></div>
        <!-- 切换卡 -->
        <div class="menus">
            <ul class="container">
                <li onclick="index()">首页</li>
                <li onclick="nine()">9块9包邮</li>
                <li onclick="big()">超值大额劵</li>
                <li class="on" onclick="down()">降温急救穿搭</li>
            </ul>
        </div>
        <div class="banner  container">
            人气女装上新
        </div>
        <div class="product">
            <div class="product-container  container">
                <ul>
                </ul>
            </div>
        </div>
        <div class="product-more  container">
            <div class="more">查看更多</div>
        </div>
        <!-- 底部 -->
        <div id="foot"></div>
    </div>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $('#header').load('../pages/header.html')
        $('#foot').load('../pages/foot.html')
        $('.sub-ul ul li').on('click', function () {
            console.log($(this).index())
            $('.sub-ul ul li').removeClass('active')
            $(this).addClass('active')
        })
        $.ajax({
            type: 'get',
            url: 'http://www.xiongmaoyouxuan.com/api/column/3183/items?start=0',
            data: {},
            success: function (list) {
                let data = list.data.list
                console.log('data', data)
                showList(data)
            }
        })
        let datalist = []; //定义数组为空
        function showList(data) {
            datalist = [...datalist, ...data];
            console.log("datalist", datalist);
            let num = datalist.length % 4;
            console.log("num", num);
            if (num !== 0) {
                datalist.splice(datalist.length - num, num);
            }
            let str = "";
            datalist.forEach((item) => {
                str += `
 <li class="LI" onclick="changeHtml(${item.id})" >
 <img src="${item.image}" class="Img" alt="">
 <div class="ul-bottom">
     <div class="ul-bottom-F">${item.title}</div>
     <div class="ul-bottom-T">
         <span class="T-tao">淘宝</span>
         <span class="T-bao">包邮</span>
     </div>
     <div class="ul-bottom-TH">
         <div class="price"> <span class="span-M">￥</span> <span class="bigspan  span-M">${Math.floor(
                    item.price
                )}</span>
             <span class="span-M"  >
             .${typeof (item.price, item.price.toString().split(".")[1]) ==
                        typeof "string"
                        ? (item.price, item.price.toString().split(".")[1])
                        : " "
                    }
             </span>
             <span class="colorspan">${item.saleNum}人已买</span>
             <span class="juanspan  right">${item.couponValue}</span>
         </div>
     </div>
 </div>
</li>
 `;
            });
            $(".product-container  ul").html(str);
        }
        // 加载更多 
        function loadProduct(pageNo) {
            $.ajax({
                type: "get",
                url: "http://www.xiongmaoyouxuan.com/api/tab/1/feeds",
                data: {
                    start: pageNo * 20, //开始页号
                },
                headers: { "x-platform": "pc" },
                success: function (ABlist) {
                    if (ABlist.code == 200) {
                        console.log("listpage", ABlist);
                        // 商品列表
                        let data = ABlist.data.list;
                        showList(data);
                    }
                },
            });
        }
        // 点击更多  商品叠加  每页是20条 tab/1  tab/2
        function loadMore() {
            let pageNo = 0; //起始页为0
            $(".more").on("click", function () {
                //调用商品列表，获取商品数据
                // 页号
                // pageNo++
                loadProduct(++pageNo);
            });
        }
        loadMore();
        function index() {
            location.href = '../pages/index.html'
        }
        function nine() {
            location.href = '../pages/nine.html'
        }
        function big() {
            location.href = '../pages/big.html'
        }
        function down() {
            location.href = '../pages/down.html'
        }

        // 点击商品景区详情页
        function changeHtml(id) {
            console.log(id);
            $.ajax({
                type: "get",
                url: "http://www.xiongmaoyouxuan.com/api/detail?id",
                data: { id },
                headers: { "x-platform": "pc" },
                success: function (list) {
                    let data = list.data.detail;
                    console.log("data", data);
                    localStorage.setItem('detail', JSON.stringify(data))
                    location.href = '../pages/detail.html'
                },
            });

        }
    </script>
</body>

</html>